<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="layui/css\layui.css"> 
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
<script type="text/javascript" src="js/vue/vue.js"></script>
<title>News</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link rel="stylesheet" type="text/css" href="skin/laypage.css">
<script type="text/javascript" src="layui/lay/modules/laypage.js"></script>
<script type="text/javascript">

$(function(){
	/* alert("|asd"); */
              list(1);
}) 

function news(){
	$("#main").show();
	$("#hide").show();
	$("#Newsmanager").hide();
}

function preview(file)  
{  
var prevDiv = document.getElementById('photos');  
if (file.files && file.files[0])  
{  
var reader = new FileReader();  
reader.onload = function(evt){  
prevDiv.innerHTML = '<img src="' + evt.target.result + '" style="width:270px;height:150px;"/>';  
}    
reader.readAsDataURL(file.files[0]);  
}  
else    
{  
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';  
}  
}  
		
		/* 
		function addNews(){
			var title=$("#title").val();
			var content=$("#content").val();
		//	var photo=$("#photo").val();
			 var photos = new FormData(document.getElementById("photo"));
			var user_Id=$("#user_Id").val();
			alert("AS");
			$.ajax({
				url:'addNewss',
				data:{title:title,content:content,user_Id:user_Id},
				data:photos,
				type:"post",
				dataType:"json",
				success:function(result){}
			})
			
		} */
		
		
		function deleteNews(obj){
			
			var newsId=$("#deleteIds").val();	
			console.log(".............."+newsId);
			$.ajax({
				url:'deleteNews',
				data:{newsId:newsId},
				type:'post',
				dataType:'json',
				success:function(result){}
			})
		}
		
		function dele(obj){
			var newsId=$(obj).next().val();
			$("#deleteIds").val(newsId);
		}
		
		function newsManager(currentPage){
			/* alert("asd"); */
			 /* alert(currentPage); */
			$("#main").hide();
			$("#hide").hide();
			$("#Newsmanager").show();
			$.ajax({
				url:"ManagerqueryList",
				type:"post",
				data:{currentPgae:currentPage},
				dataType:"json",
				success:function(result){
					vue.result=result.news;
					laypage({
						cont:$("#laypage02"),
						pages:result.pages,
			            curr:currentPage,
			            groups:3,	
			            skin:'molv',
						skip:true,						
						groups:3,
						jump:function(obj,first){
							if(!first){
								newsManager(obj.curr)			
			                 }
					}			
			})
				}
			})
		}
		
		</script>
		
	
	
	



<style type="text/css">
 ul li{
	list-style:none;
}

#titles{
    font-size: 30px;
    position:relative;
    left:7em;
    top:-2.5em;
}
body{
background-color: #696969;

}
#lj1{
text-decoration: none;

}
#main{
	margin:0 auto;
	/* border: yellow solid 2px; */
	height:800px;
	width:1000px;
}
.newsP{
	height:100px;
	width: 200px;
	
	
}
#hide{
	color:white;
}
#add{
	 position:relative;
    	left:50em;
}
.textt{
	margin:0 auto;
	
    	
    	line-height: 2em;
}
#content{
height:150px;
}
#photos{
	position:relative;
    	left:10em;
}
.subm{
	position:relative;
    	left:10em;
}
#model{
	width:150px;
	height:150px;
}
#tijiaoa{
	position:relative;
    	left:25em;
    	top:-2em;
}
#fwl{
	color:yellow;
	font-size:15px;
}
#ttt{
	color:#00CCFF;
	font-size:25px;
}
#timee{
	color:#CCCC00;
	font-size:20px;
}
.xinwenzixun{
	color:red;
}
</style>


</head>
<body>
<div class="breadcrumb" id="hide">
    <a href="index.jsp">游戏首页</a><a href="news.jsp" class="xinwenzixun">新闻资讯</a>
  </div>
  
  管理员：‘${uname}’<button onclick="newsManager(1)">进入新闻管理</button>
  <button onclick="news()">返回新闻资讯</button>
<%--   <c:choose>${state==1 && state==2}
  <c:when test="ture" >
  
  </c:when>
  <c:otherwise>
  欢迎 ‘${uname}’
  </c:otherwise>
  </c:choose> --%>
<div id="main">

<h1>最新资讯</h1>

<div id="show">
</div>
<div id="di"></div>
<script type="text/javascript">
function list(currentPgae){
	/* alert("|......."); */
	$.ajax({
		url:"queryList",
		type:"post",
		data:{currentPgae:currentPgae},
		dataType:"json",
		success:function(result){
			$("#show").html("");
			$.each(result.news,function(index,exem){
				$("#show").append("<ul>"+"<a id='lj1' href=newsDetails?newsId="+exem.newsId +">"+"<img class='newsP' alt='' src="+exem.photo +">"+"<li id='titles'><span id='ttt'>"+exem.title+'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="timee">'+exem.time+'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp <span id="fwl">访问量：'+exem.statistics+"<span></li></a><ul>");				
			})
			laypage({
			cont:$("#di"),
			pages:result.pages,
            curr:currentPgae,
            groups:3,
			skin:'#429842',
			skip:true,
			first:'首页',
			last:'尾页',
			groups:3,
			jump:function(obj,first){
				if(!first){
					list(obj.curr)			
                 }
		}
			
})
			
		}
	})

}

function tij(){
	alert("添加成功！");
	
}

</script>
</div>
<!-- ================================================================================================ -->
<div id="Newsmanager" style="display:none;">
<table class="layui-table" >
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>新闻ID</th>
      <th>时间</th>
      <th>标题</th>
      <th>选项</th>
    </tr> 
  </thead>
  <tbody>
    <tr v-for="re in result">
      <td>{{re.newsId}}</td>
      <td>{{re.time}}</td>
      <td>{{re.title}}</td>
      <td><button class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal1' onclick="dele(this)">删除</button>
      <input type="hidden"  :value="re.newsId"/>
      </td>
      
    </tr>
   
  </tbody>
</table>
<div id="laypage02"></div>

 <!-- 单个下架模态框 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">提示信息：</h4>
      </div>
      <div class="modal-body">
                 你确定要删除吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="deleteNews(this)" id="deleteGoods">确定</button>
     	<input type="hidden" id="deleteIds" name="newsId">
      </div>
    </div>
  </div>
</div>




<button id="add" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >增加新闻+</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">新闻资讯</h4>
      </div>
      <div class="modal-body">
        
        <form  action="addNewss" method="post" enctype="multipart/form-data" class="textt">
  <div class="form-group">
    <label for="exampleInputEmail1">请输入标题：</label>
    <input type="hidden" name="user_Id" id="user_Id" value="2" />
    <input type="text" class="form-control" id="title" placeholder="请输入标题" name="title" >
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">请输入内容：</label>
    <textarea class="form-control" rows="3"  placeholder="请输入内容" id="content" name="content"></textarea>
  
  </div>
  <div class="form-group">
    <label for="exampleInputFile">文件上传：</label>
    <input type="file" id="photo" name="photos"  onchange="preview(this)"/>
    <p class="help-block">图片展示</p>
    <div id="photos"></div>
  </div>
  <div class="form-group" id="tijiaoa">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" class="subm" onclick="tij()">提交</button>
    </div>
  </div>
</form>
        
        
      </div>
     <!--  <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="addNews()">Save changes</button>
      </div> -->
    </div>
  </div>
</div>

</div>
<script type="text/javascript">
var vue=new Vue({
	el:'#Newsmanager',
	data:{
		result:'',
	},
	methods:{
		
	}
});

</script>
</body>
</html>